<template>
    <div class="comments">
            <div class="top">
                <h2>首页</h2>
            </div>
            <div class="allnumber">
                <div class="nums">数据总览</div>
                <div class="allrect">
                    <div class="rect">
                        <div class="rectleft">
                            <img src="../assets/imgs/add.svg" alt="">
                        </div>
                        <div class="rectright">
                            <p class="onenum">500</p>
                            <p class="day">今日预约人数</p>
                        </div>
                        <img class="upto" src="../assets/imgs/top.svg" alt="">
                    </div>
                    <div class="rect">
                        <div class="rectleft1 rectleft">
                            <img src="../assets/imgs/listen.svg" alt="">
                        </div>
                        <div class="rectright">
                            <p class="onenum">400</p>
                            <p class="day">今日挂号人数</p>
                        </div>
                        <img class="upto" src="../assets/imgs/top.svg" alt="">
                    </div>
                    <div class="rect rect2">
                        <div class="rectleft2 rectleft">
                            <img src="../assets/imgs/money.svg" alt="">
                        </div>
                        <div class="rectright">
                            <p class="onenum">50000</p>
                            <p class="day">今日门诊充值总额</p>
                        </div>
                        <img class="upto" src="../assets/imgs/top.svg" alt="">
                    </div>
                    <div class="rect">
                        <div class="rectleft3 rectleft">
                            <img src="../assets/imgs/up.svg" alt="">
                        </div>
                        <div class="rectright">
                            <p class="onenum">4000</p>
                            <p class="day">今日门诊消费总额</p>
                        </div>
                        <img class="upto" src="../assets/imgs/top.svg" alt="">
                    </div>
                    <div class="rect ">
                        <div class="rectleft4  rectleft">
                            <img src="../assets/imgs/people.svg" alt="">
                        </div>
                        <div class="rectright">
                            <p class="onenum">678</p>
                            <p class="day">今日绑卡人数</p>
                        </div>
                        <img class="upto" src="../assets/imgs/top.svg" alt="">
                    </div>
                </div>

                <div class="alltable">

                    <div class="getday" ref="chart1"></div>

                    <div class="getdoor" ref="chart"></div>

                    <div class="getnumber">
                        <h4>实时挂号</h4>
                        <el-table
                            :data="tableData" stripe style="width: 100% ;height:100%">
                            <el-table-column  prop="imgs" label="头像" >
                            <template slot-scope="scope">
                                <img :src="scope.row.imgs" style="width: 40px; height: 40px;">
                            </template>
                            </el-table-column>
                            <el-table-column  prop="name"  label="患者姓名">
                            </el-table-column>
                            <el-table-column  prop="phone"  label="患者手机号码">

                            </el-table-column>
                            <el-table-column  prop="place" label="挂号科室">
                            </el-table-column>

                            <el-table-column
                            prop="price"
                            label="挂号费">
                            </el-table-column>

                            <el-table-column
                            prop="date"
                            label="挂号时间">
                            </el-table-column>
                        </el-table>
                    </div>


                    <div class="gethot">
                        <div class="gethot-l">
                            <h4 >热门科室</h4>
                            <el-table
                                :data="tableHot1"
                                stripe
                                style="width: 100%;height: 100%;">
                                <el-table-column
                                prop="row"
                                label="排名"
                               >
                                </el-table-column>
                                <el-table-column
                                prop="places"
                                label="科室"
                               >
                                </el-table-column>
                                <el-table-column
                                prop="num"
                                label="挂号量">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="gethot-r">
                            <h4>热门医生</h4>
                            <el-table
                                :data="tableHot2"
                                stripe
                                style="width: 100%;height: 100%">
                                <el-table-column
                                prop="row"
                                label="排名"
                               >
                                </el-table-column>
                                <el-table-column
                                prop="name"
                                label="患者姓名"
                               >
                                </el-table-column>
                                <el-table-column
                                prop="num"
                                label="挂号量">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </div>

            </div>
            
    
    </div>
</template>
 
 <script>
 import * as echarts from 'echarts';
 export default {
   name: 'CommentView',
   methods:{
        formatImage(row, column, cellValue) {
            return `<img class="nameurl" src="${cellValue}" style="width: 50px; height: 50px">`;
        },
    },
    data() {
      return {
        chart: null, // 用于存储 ECharts 实例的引用
        chart1:null,
        tableData: [{
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },
        {
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },
        {
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },
        {
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },
        {
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },
        {
          imgs:'https://img2.baidu.com/it/u=140788575,4191915434&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          name: '王小虎',
          phone:'15678900988',
          place:'内科-肾内科',
          price:60.00,
          date: '2016-05-02 14.02.26'
        },

        ],

        tableHot1: [{
          row: 1,
          places: '肾内科',
          num: 120
        },
        {
          row: 1,
          places: '肾内科',
          num: 120
        },
        {
          row: 1,
          places: '肾内科',
          num: 120
        },
        {
          row: 1,
          places: '肾内科',
          num: 120
        },
        {
          row: 1,
          places: '肾内科',
          num: 120
        },{
          row: 1,
          places: '肾内科',
          num: 120
        }
      ],
      tableHot2: [{
          row: 1,
          name: '王明玉',
          num: 120
        },{
          row: 1,
          name: '王明玉',
          num: 120
        },{
          row: 1,
          name: '王明玉',
          num: 120
        },{
          row: 1,
          name: '王明玉',
          num: 120
        },{
          row: 1,
          name: '王明玉',
          num: 120
        },{
          row: 1,
          name: '王明玉',
          num: 120
        }
      ],
      }
    },
    mounted(){
        // 第二个图表配置
        const options = {
        title: {
            text: '近7日门诊充值趋势'
        },
        xAxis: {
            type: 'category',
            data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [20600, 21000, 59600, 21000, 78000, 30000, 21000],
            type: 'line',
            smooth: 0.5,
            symbol: 'none',
            lineStyle: {
            color: '#f3b062',
            width: 4
                },
            }
        ]
        };
        // 初始化 ECharts 实例
        this.chart = echarts.init(this.$refs.chart);
 
        // 使用配置项生成图表
        this.chart.setOption(options);

         // 第一个图表配置
        const options1 = {
        title: {
            text: '近7日预约挂号情况'
        },
        xAxis: {
            type: 'category',
            data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [5600, 7600, 3600, 5000, 7800, 5600, 6200],
            type: 'bar',
            symbol: 'ellipse', // 设置为椭圆形状
            symbolSize: [50, 20],
            symbolRepeat: true, // 使椭圆重复以形成柱状图

            }
        ]
        };
    // 初始化 ECharts 实例
    this.chart1 = echarts.init(this.$refs.chart1);
 
    // 使用配置项生成图表
    this.chart1.setOption(options1);
    },
    beforeDestroy() {
    // 在组件销毁前销毁 ECharts 实例，避免内存泄漏
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.chart1) {
      this.chart1.dispose();
    }
  }

 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.coments{
    padding: 0 0 0 10px;
    box-sizing: border-box;
  }
  .top{
    display: flex;
    position: relative;
  }
h2{
    height: 30px;
    line-height: 30px;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    margin-left: 30px;
}
h2::after{
    content: '';
    border-width: 0px;
    position: absolute;
    left: 0px;
    top:12px;
    width: 24px;
    height: 8px;
    border-radius: 10px;
    background-color: #006EFF;
}
.allrect{
    display: flex;
    justify-content: space-between;
}

.rect{
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border-width: 0px;
    width: 200px;
    height: 80px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}

.rectleft1{
    background: linear-gradient(270deg, rgba(236, 128, 141, 1) 0%, rgba(244, 99, 99, 1) 100%) !important;
}
.rectleft2{
    background: linear-gradient(270deg, rgba(202, 249, 130, 1) 0%, rgba(46, 212, 119, 1) 100%) !important;
}
.rectleft3{
    background: linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%) !important;
}
.rectleft4{
    background: linear-gradient(270deg, rgba(194, 128, 255, 1) 0%, rgba(132, 0, 255, 1) 100%) !important;
}
.rectleft{
    width: 60px;
    height: 60px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background: linear-gradient(270deg, rgba(98, 156, 244, 1) 0%, rgba(0, 110, 255, 1) 100%);
}
.rectleft img{
    width: 20px;
    height: 20px;
}
.rectright{
    margin-left: 10px;
}
.upto{
    position: absolute;
    top: 12px;
    right: 8px;
    width: 14px;
    height: 14px;
}
.nums{
    margin:15px 0;
}
.onenum{
    font-size: 22px;
    font-weight: 700;
}
.day{
    font-size: 12px;
    font-weight: 400;
    color: #AAAAAA;
}
.alltable{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}
.getnumber,.getdoor,.getday{
    width: 48%;
    height: 400px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
.gethot{
    display: flex;
    justify-content: space-between;
    width: 48%;
    height: 400px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.gethot-l,.gethot-r{
    width:48%;
    height: 400px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
h4{
    color: rgba(74,74,74,1);
    font-size: 20px;
    font-weight: 600px;
    letter-spacing: 1px;
    line-height: 36px;
    padding: 10px 0;
    box-sizing: border-box;
}
.el-table{
    font-size: 13px;
    border-radius: 8px;
}
.el-table__row{
    color: #333333;
}
</style>